<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>js</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,
user-scalable=no"/>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #div1 {
      position: relative;
      border: 1px solid gray;
      width: 760px;
      margin: 20px auto;
      height: 160px;
      overflow: hidden;
    }

    #div1 ul {
      position: absolute;
      left: 0;
    }

    #div1 a {
      position: absolute;
      z-index: 2;
      text-decoration: none;
      top: 45%;
      display: none;
    }

    #div1 ul li {
      padding: 5px;
      list-style: none;
      width: 180px;
      height: 150px;
      float: left;
    }

    #div1 ul li img {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
<script type="text/javascript">
  window.onload = function () {
    var oDiv = document.getElementById('div1');
    var oUl = oDiv.getElementsByTagName('ul')[0];
    var aLi = oUl.getElementsByTagName('li');
    var aA = oDiv.getElementsByTagName('a');
    var iSpeed = 1;//正左负右
    var timer = null;
    //计算ul的宽为所有li的宽的和;
    oUl.innerHTML += oUl.innerHTML + oUl.innerHTML;
    oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';

    function Slider() {
      if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
        oUl.style.left = 0;
      } else if (oUl.offsetLeft > 0) {
        oUl.style.left = -oUl.offsetWidth / 2 + 'px';
      }
      oUl.style.left = oUl.offsetLeft - iSpeed + 'px';//正负为方向
    }

    timer = setInterval(Slider, 30);
    aA[0].onclick = function () {
      iSpeed = 1; //控制速度的正负
    }
    aA[1].onclick = function () {
      iSpeed = -1;
    }
    oDiv.onmouseover = function () {
      clearInterval(timer);
    }
    oDiv.onmouseout = function () {
      timer = setInterval(Slider, 30);
    }
  };
</script>
<div id="div1">
  <ul>
    <li><img src="img/2.jpg"></li>
    <li><img src="img/3.jpg"></li>
    <li><img src="img/4.jpg"></li>
    <li><img src="img/5.jpg"></li>
  </ul>
  <a href="javascript:;" style="left:10px;"><</a>
  <a href="javascript:;" style="right:10px;">></a>
</div>
</body>
</html>
